<template>
	<view>
		<uni-nav-bar :title="title" :fixed="true" :border="false" color="var(--theme-text-color)" backgroundColor="var(--theme-color)"></uni-nav-bar>
		<view class="icon-xl circle flex-center back-btn" style="position: fixed;top: 5px;left: 16px;z-index: 100;" @click="backPage">
			<uni-icons type="arrow-left" size="24" color="#fff"></uni-icons>
		</view>
		<view v-show="type==1" class="p-lr-16 mt20">
			<view class="" style="padding-bottom: 50px;">
				<uni-forms :modelValue="bankInfo" ref="bankRule" label-position="top" label-width="auto" :rules="rules">
					<uni-forms-item :label="$t('openBankName')" name="realname">
						<input class="u-input" :disabled="disableInput" v-model="bankInfo.realname" :placeholder="$t('enter')+$t('openBankName')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('personal.nation')" name="nationality">
						<input class="u-input" :disabled="disableInput" v-model="bankInfo.nationality" :placeholder="$t('enter')+$t('personal.nation')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('openBank')" name="bank">
						<input class="u-input" :disabled="disableInput" v-model="bankInfo.bank" :placeholder="$t('enter')+$t('openBankname2')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('bankcode')" name="code">
						<input class="u-input" :disabled="disableInput" v-model="bankInfo.code" :placeholder="$t('enter')+$t('bankcode')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('IDCrad')" name="address">
						<input class="u-input" :disabled="disableInput" v-model="bankInfo.address" :placeholder="$t('enter')+$t('IDCrad')" />
					</uni-forms-item>
					<button v-if="!disableInput" :class="['btn-submit', disabled?'login-btn-disabled':'login-btn']" :disabled="disabled" @click="submitForm">{{$t('save')}}</button>
				</uni-forms>
			</view>
		</view>
		<view v-show="type > 1" class="p-lr-16 mt20">
			<view class="">
				<uni-forms :modelValue="usdtInfo" ref="usdtRule" labelWidth="auto" label-position="top" :rules="rules2">
					<uni-forms-item :label="$t('usdtAddress')" name="address">
						<input class="u-input" :disabled="disableInput" v-model="usdtInfo.address" :placeholder="$t('usdtAddress')" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<!-- 已经有地址的情况下才显示以下 -->
			<view v-show="disableInput" class="mt15 box radius-12 flex-between" @click="callShowPanel" style="padding: 15px;">
				<text class="fs14">{{$t('tips3')}}</text>
				<!-- <navigator url="/pages/personal/withdraw-account/withdraw-account"> -->
					<uni-icons type="right" color="#fc6d22" size="16"></uni-icons>
				<!-- </navigator> -->
			</view>
			<button v-if="!disableInput" :class="['btn-submit','mt50', disabled2?'login-btn-disabled':'login-btn']" :disabled="disabled2" @click="submitForm2">{{$t('save')}}</button>
		</view>
		<!-- <meiQia ref="meiqiaRef"></meiQia> -->
	</view>
</template>

<script setup>
	import { onMounted, ref, watch } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { bindbank, bindUSDTAddress, getMyAddress } from '@/api/index.js'
	import {hideBankCode, maskID } from '@/utils/utils.js'
	import useGlobalProperties from '@/utils/useGlobalProperties.js'
	import config from '@/config';
	// import meiQia from '../../../components/meiQia.vue';
	const { $t,$i18n } = useGlobalProperties()
	const type = ref(null)
	const title = ref(null)
	const disabled = ref(true)
	const disabled2 = ref(true)
	const bankInfo = ref({
		realname:'',
		nationality:'',
		bank:'',
		code:'',
		address:''
	})
	const usdtInfo = ref({
		address:''
	})
	const rules = ref({
		realname: { rules:[ { required: true, errorMessage: $t('enter')+$t('openBankName'), },{
					validateFunction:function(rule,value,data,callback){
						const regex = /^[\u4e00-\u9fa5]+$/; // ^：开头；[a-zA-Z0-9]：允许的字符；*：0个或多个；$：结尾
						// console.log('regex.test(value)',regex.test(value));
						if (!regex.test(value)) {
							callback('只能输入中文')
						}
						return true
					}
				},  ]},
		nationality: { rules:[ { required: true, errorMessage: $t('enter')+$t('personal.nation'), } ]},
		bank: { rules:[ { required: true, errorMessage: $t('enter')+$t('openBankname2'), } ]},
		code: { rules:[ { required: true, errorMessage: $t('enter')+$t('bankcode'), } ]},
		address: { rules:[ { required: true, errorMessage: $t('enter')+$t('IDCrad'), },{
					minLength: 15,
					maxLength: 18,
					errorMessage: '身份证号长度是15到18位',
				}, ]},
	})
	const rules2 = ref({
		address: { rules:[ { required: true, errorMessage: $t('usdtAddress'), } ]},
	})
	const bankRule = ref(null)
	const usdtRule = ref(null)
	const submitForm = () =>{
		bankRule.value.validate(valid => {
			if (!valid) {
				const params = {
					account_name: bankInfo.value.realname,
					bank_name: bankInfo.value.bank,
					bank_card: bankInfo.value.code,
					bank_address: bankInfo.value.address,
					nation: bankInfo.value.nationality,
				}
				bindbank(params).then(res =>{
					if(res.code == 1){
						uni.showToast({
							title: $t('bindSucess'),
							icon:'none'
						});
						getInit();
						uni.switchTab({
							url:'/pages/personal/personal'
						})
					}
				})
			}
		});
	}
	const meiqiaRef = ref(null);
	
	const callShowPanel = () => {
		window.location.href = config.BASE_URL+ "/addons/kefu/index/mobile"
	  // if (meiqiaRef.value) {
	  //   meiqiaRef.value.showPanel(); // 调用子组件的 showPanel 方法
	  // }
	};
	const submitForm2 = () =>{
		usdtRule.value.validate(valid => {
			if (!valid) {
				const params = {
					type: type.value==2?'1':'2', //协议:1=TRC-20,2=ERC-20
					address: usdtInfo.value.address,
				}
				bindUSDTAddress(params).then(res =>{
					if(res.code == 1){
						uni.showToast({
							title: $t('bindSucess'),
							icon:'none'
						});
						getInit();
					}
				})
			}
		});
	}
	const backPage = () =>{
		// 返回上一页
		// uni.navigateBack({
		//   delta: 1 // 默认值为1，表示返回上一页
		// });
		history.back()
	}
	// 监听 loginForm 对象的变化
	watch(bankInfo, (newVal, oldVal) => {
	  if(bankInfo.value.realname && bankInfo.value.nationality&& bankInfo.value.bank&& bankInfo.value.code&& bankInfo.value.address){
		  disabled.value = false
	  }else{
		  disabled.value = true
	  }
	}, { deep: true });  // 设置 deep 为 true 以便深度监听对象的变化
	watch(usdtInfo, (newVal, oldVal) => {
	  if(usdtInfo.value.address){
		  disabled2.value = false
	  }else{
		  disabled2.value = true
	  }
	}, { deep: true });  // 设置 deep 为 true 以便深度监听对象的变化
	onLoad((options)=>{
		type.value = options.type
		title.value = options.type==1?$t('bankCard')+$t('account'):options.type==2?'USD-TRC20'+$t('account'):'USD-ERC20'+$t('account')
	})
	const disableInput = ref(false)
	const getInit =() =>{
		getMyAddress({type:type.value}).then(res =>{
			// console.log(res);
			if(res.data != null){
				disableInput.value = true
				if(type.value == 1){
					bankInfo.value.realname = res.data.account_name
					bankInfo.value.nationality = res.data.nation
					bankInfo.value.bank = res.data.bank_name
					bankInfo.value.code =  hideBankCode(res.data.bank_card)
					bankInfo.value.address = maskID(res.data.bank_address)
				}else {
					usdtInfo.value.address = res.data.address
				}
			}
		})
	}
	onMounted(() =>{
		getInit();
	})
</script>

<style scoped>
.u-input {
    border-radius: 12px!important;
    background-color: var(--theme-box-bg) !important;
    padding: 15px 20px!important;
	font-size: 15px !important;
}
::v-deep uni-button:after{
	border: none!important;
}
.box {
	background-color: #f4eadd;
	color: #fc6d22;
}
</style>
